<template>
  <span>
    <el-tag size="mini" :type="mapping[type].elTagType">●</el-tag>
    <span v-if="showText" style="margin-left: 5px;">{{ mapping[type].text }}</span>
  </span>
</template>
<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';

@Component({})
export default class PuzzleMarker extends Vue {
  private readonly mapping = [
    {elTagType: 'warning', text: '存在.p2c文件，未发布到创意工坊'},
    {elTagType: '', text: '存在.p2c文件，已发布到创意工坊'},
    {elTagType: 'info', text: '不存在.p2c文件，已发布到创意工坊'},
    {elTagType: 'danger', text: '存在.p2c文件，曾发布到创意工坊，后来被删除'}
  ];

  @Prop({required: true})
  private readonly type: 0 | 1 | 2 | 3;

  @Prop({default: false})
  private readonly showText: boolean;
}
</script>
